<template>
    <div class="main">
        <div class="header">
            <div class="header-logo text-center">
                <span>DEMO</span>
            </div>
            <div class="block" style="margin-left: 10px;">
                <el-breadcrumb>
                    <el-breadcrumb-item>
                        <span><i class="el-icon-home"/>首页</span>
                    </el-breadcrumb-item>
                    <template v-for="tab in path">
                        <el-breadcrumb-item>{{ tab.title }}</el-breadcrumb-item>
                    </template>
                </el-breadcrumb>
            </div>
            <user/>
        </div>
        <el-menu class="slide-menu"
                 background-color="#001529"
                 text-color="hsla(0, 0%, 100%, 0.7)"
                 active-text-color="#ffffff"
                 :unique-opened="true"
                 :default-active="active"
                 @select="selected">
            <template v-for="menu in menus">
                <el-submenu :index="menu.path">
                    <template slot="title">
                        <i v-if="menu.ext.length" :class="menu.ext"></i>
                        <span>{{ menu.name }}</span>
                    </template>
                    <template v-for="child in menu.children">
                        <el-menu-item :index="child.path">
                            <span>{{ child.name }}</span>
                        </el-menu-item>
                    </template>
                </el-submenu>
            </template>
        </el-menu>
        <template v-if="showData">
            <tab-bar/>
            <div class="data">
                <router-view/>
            </div>
        </template>
    </div>
</template>

<script>
import {loginInfo} from '@/api'
import TabBar from "./tabBar";
import user from "./user";

export default {
    data() {
        return {
            menus: [],
            showData: false,
            active: ''
        }
    },
    components: {TabBar, user},
    computed: {
        path() {
            let now = this.$route.name, path = [];
            if (this.menus.length > 0 && now != 'index' && now != 'chpw') {
                path = this.getPathInfo(now);
            }
            this.active = path.length > 0 ? path[1].path : '';
            return path;
        }
    },
    // 路由变化添加tab标签
    beforeRouteUpdate(to, from, next) {
        this.$store.commit('addTab', to);
        next();
    },
    created() {
        this.$store.commit('addTab', this.$route);
        loginInfo(res => {
            this.$store.commit('admin', res.admin);
            this.menus = res.menus;
            this.showData = true;
        });
    },
    methods: {
        getPathInfo(path) {
            let menus = this.menus,
                lv1 = '',
                lv2 = '';
            for (lv1 in menus) {
                for (lv2 in menus[lv1].children) {
                    if (path == menus[lv1].children[lv2].path) {
                        this.$store.commit('auth', menus[lv1].children[lv2].auth);
                        return [{
                            path: lv1,
                            title: menus[lv1].name
                        }, {
                            path: path,
                            title: menus[lv1].children[lv2].name,
                        }];
                    }
                }
            }
            window.location.href = "#/403";
        },
        // 左侧菜单选中
        selected(router) {
            if (router != this.$route.name) {
                this.$router.push({name: router});
            }
        }
    }
}
</script>
